<!--
 * @Author: ChunLai
 * @Date: 2023-07-27 10:26:44
 * @LastEditTime: 2025-08-06 11:14:15
 * @Description: 投保信息展示模块
 * @FilePath: \02.bldinsure\src\views\sign\components\InsureInfos.vue
-->
<template>
  <div>
    <div class="mode2 mt10">
      <div class="flex-lr mode2_top">
        <span class="tt_l">投保信息</span>
        <span class="tt_v" @click="showPop = true">
          查看详情<span class="ms-row-icon ml4 size12"></span>
        </span>
      </div>
      <div class="li_cell">
        <div class="cell_label">
          <span>投保人</span>
        </div>
        <div class="cell_value multi">
          <div>
            {{ applicant.name }}，{{ getSexLabel(applicant.sex) }}，{{
              `${$GlobalFuns.userAge(applicant.birthDate)}`
            }}岁
          </div>
        </div>
      </div>
      <div v-for="(item, index) in apiBbrMult" :key="`bbr_msg${index}`">
        <div class="li_cell">
          <div class="cell_label">
            <span>
              被保险人{{ apiBbrMult.length > 1 ? `【${index + 1}】` : "" }}
            </span>
          </div>
          <div class="cell_value multi">
            <p v-if="item.relationToAppnt == '4'">本人</p>
            <p v-else>
              {{ item.relationToAppntName }}，{{ item.name }}，{{
                getSexLabel(item.sex)
              }}，{{ `${$GlobalFuns.userAge(item.birthDate)}` }}岁
            </p>
          </div>
        </div>
        <div class="li_cell" v-if="syrMinNum > 0">
          <div class="cell_label">
            <span>---受益人</span>
          </div>
          <div class="cell_value multi">
            <template v-if="item.bnfs.length > 0">
              <div v-for="(syr, index) in item.bnfs" :key="`syr_msg${index}`">
                <template v-if="syr.isSame && syr.isSame == '1'">
                  【{{ index + 1 }}】同投保人
                </template>
                <template v-else>
                  【{{ index + 1 }}】{{ syr.name }}，{{
                    getSexLabel(syr.sex)
                  }}，{{ `${$GlobalFuns.userAge(syr.birthDate)}` }}岁
                </template>
              </div>
            </template>
            <div
              style="text-align: right; width: 100%"
              v-if="item.bnfs.length == 0"
            >
              {{ getBnfTypeName(item.bnfCategory) }}
            </div>
          </div>
        </div>
      </div>
      <div class="li_cell" v-if="payApiReg.hasOwnProperty('effectiveDate')">
        <div class="cell_label">
          <span>保单生效日期</span>
        </div>
        <div class="cell_value">{{ payInfo.effectiveDate }} 0时</div>
      </div>
      <div class="li_cell" v-if="payApiReg.hasOwnProperty('expiryDate')">
        <div class="cell_label">
          <span>保单截止日期</span>
        </div>
        <div class="cell_value">{{ payInfo.expiryDate }} 24时</div>
      </div>
      <div class="li_cell" v-if="showXbModal">
        <div class="cell_label">
          <span>自动申请续保</span>
        </div>
        <div class="cell_value">
          {{ renewalInfo.renewFlag == "-1" ? "是" : "否" }}
        </div>
      </div>
      <template v-if="renewalInfo.renewFlag == '-1'">
        <div class="li_cell" v-if="xbApiReg.hasOwnProperty('bankAccNo')">
          <div class="cell_label">
            <span>续保缴费账号</span>
          </div>
          <div class="cell_value">
            {{ renewalInfo.bankAccNo }}
          </div>
        </div>
      </template>
      <div class="li_cell" v-if="payApiReg.hasOwnProperty('bankCode')">
        <div class="cell_label">
          <span>支付信息</span>
        </div>
        <div class="cell_value">
          {{ payInfo.bankName }}，尾号{{ payInfo.bankAccNo.slice(-4) }}
        </div>
      </div>
      <div class="li_cell" v-if="payApiReg.hasOwnProperty('bankAccNo')">
        <div class="cell_label">
          <span>银行账号</span>
        </div>
        <div class="cell_value">
          {{ payInfo.bankAccNo }}
        </div>
      </div>
    </div>
    <van-popup
      v-model="showPop"
      round
      position="bottom"
      closeable
      v-if="showPop"
    >
      <div class="pop_tt">查看投保信息</div>
      <div class="pop_main_box">
        <UserInfos :msgObj="applicant" uType="tbr" />
        <div v-for="(bbritem, idex) in apiBbrMult" :key="`syr_obj${idex}`">
          <UserInfos
            :titleTxt="`被保险人${apiBbrMult.length > 1 ? `${idex + 1}` : ''}`"
            uType="bbr"
            :msgObj="bbritem"
          />
          <template v-if="bbritem.bnfs.length > 0">
            <SyrInfo
              :msgObj="syritem"
              :msgIndex="sidx"
              :titleTxt="`受益人${
                bbritem.bnfs.length > 1 ? `${sidx + 1}` : ''
              }`"
              v-for="(syritem, sidx) in bbritem.bnfs"
              :key="`syr_obj${sidx}`"
            />
          </template>
        </div>
        <BillInfos />
      </div>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import UserInfos from "./infos/UserInfos";
import SyrInfo from "./infos/SyrInfo";
import BillInfos from "./infos/BillInfos";

export default {
  name: "InsureInfos",
  data() {
    return {
      showPop: false,
    };
  },
  components: { UserInfos, SyrInfo, BillInfos },
  computed: {
    ...mapGetters({
      bnfTypeList: "dictionary/bnfTypeList",
      apiBbrMult: "insert/apiBbrMult",
      applicant: "insert/applicant",
      payInfo: "insert/payInfo",
      renewalInfo: "insert/renewalInfo",
      payApiReg: "infoReg/payApiReg",
      syrMinNum: "page/syrMinNum",
      showXbModal: "page/showXbModal",
      xbApiReg: "page/renewal",
    }),
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    getBnfTypeName(bnfCategory) {
      let res = "";
      if (this.bnfTypeList.length > 0) {
        const obj = this.bnfTypeList.find((ele) => ele.value == bnfCategory);
        if (obj) {
          res = obj.label;
        }
      }
      return res;
    },
    getSexLabel(value) {
      let res = "男";
      if (value === "1") {
        res = "女";
      }
      return res;
    },
  },
};
</script>

<style lang="less" scoped>
.mode2 {
  padding: 0 12px 10px 12px;
  background-color: #ffffff;

  .mode2_top {
    height: 40px;

    .tt_l {
      font-size: 16px;
      font-weight: 600;
      font-family: MiSans;
      color: rgba(36, 36, 36, 1);
    }

    .tt_v {
      font-weight: 400;
      color: rgba(52, 52, 52, 1);
    }
  }

  .mode3_top {
    height: 40px;

    &:not(:last-child) {
      border-bottom: 1px solid #ededed;
    }

    .tt_l {
      font-size: 15px;
      color: #343434;
    }

    .tt_v {
      font-weight: 400;
      color: #43cf7c;
    }
  }
}

.pop_main_box {
  height: 75vh;
  overflow-y: auto;
  background: #f5f5f9;
}

.pop_tt {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #242424;
  font-weight: 600;
  font-size: 16px;
}
.cell_label {
  width: 100px;
}
.cell_value {
  width: calc(100% - 110px);
}
</style>
